import PersonalIcon from '../../../Icon/personalIcon'
import Avator from '../../../common/Avator'
import HeaderWrapper from '../../../common/HeaderWrapper'
import HeaderDetail from '../../../common/HeaderWrapper/headerDetail'
import { getPersonalItem, getPersonalLabel, getRgb, initvalue } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor'

// import Item from '../components/Item'
import Item from '../../CommonTpl/components/Item'
import ItemWraper from '../../tpl8/components/ItemWraper'
import Title from '../../tpl8/components/Title'
import { context } from '../../../common/context'
import style from './index.module.scss'
import { LineBox, ResumeHead } from './style'

function HeaderItem({ name }) {
  const { resume: { customization, personalDetails } } = context

  const { header, applyAccentColor, layout } = customization
  const [color] = useAccentColor('resumeHeader')
  const iconStyle: any = {
    width: '15px',
    heigth: '15px',
    position: 'absolute',
    left: 0,
    top: '50%',
    transform: 'translateY(-50%)'

  }
  if (applyAccentColor?.includes('icons')) {
    iconStyle.color = color
  }
  const style: any = {
    // paddingBottom: '0.8em',
    marginTop: '8px',
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
    whiteSpace: 'nowrap',
    paddingLeft: '20px',
    position: 'relative'
  }
  if (header.position === 'top' && (header.detailsArrangement === 'grid-2' || header.detailsArrangement === 'grid-3')) {
    style.flexDirection = 'column'
  }

  if (layout.detailsPosition === 'top') {
    style.marginTop = '2px'
  }

  const content = getPersonalItem(personalDetails, name)

  const Label = () => {
    if (header.detailsArrangement !== 'wrap') {
      return <div style={ { display: 'flex', }}>
        <div>
          {
            getPersonalLabel(personalDetails, name)
          }
        </div>
        {
          content
        }
      </div>
    }
    return <>
      {
        getPersonalLabel(personalDetails, name).replace(/　/g, '')
      }
      {
        content
      }
    </>
  }

  if (content) {
    return <div style={style}>
      <PersonalIcon name={name} style={iconStyle}></PersonalIcon>
      {
        header.showLabel
          ? <Label />
          : <div>
            {
              content
            }
          </div>
      }
    </div>
  }
  else {
    return null
  }
}
function ResumeHeader(props) {
  const { initMarginH } = props
  const { resume: { customization, personalDetails }, fontScale } = context

  const { layout, spacing, applyAccentColor, header, title, colors } = customization
  const { position, photoObj } = header
  const { marginVertical, marginHorizontal } = spacing
  const { titleBkg } = title || {}

  const detailsOrder = (personalDetails?.detailsOrder || []).filter(item => item !== 'name' && item !== 'expJob')
  const nameStyle: any = {
    fontSize: `${(spacing.fontSize + 15) * fontScale}pt`,
    fontWeight: 'bold',
    lineHeight: `${spacing.lineHeight + 20}pt`,
  }
  if (layout.detailsPosition !== 'top' || position === 'top') {
    nameStyle.marginTop = '20px'
    nameStyle.textAlign = 'center'
  }

  if (applyAccentColor?.includes('name')) {
    nameStyle.color = getRgb(colors?.strong?.accentColor)
  }
  const jobStyle: any = {
    fontSize: `${(spacing.fontSize + 12) * fontScale}pt`,
    fontWeight: '500',
    lineHeight: `${(spacing.lineHeight + 15)}pt`,
    display: 'flex',
    alignItems: 'flex-end'
  }
  if (applyAccentColor?.includes('expJob')) {
    jobStyle.color = getRgb(colors?.strong?.accentColor)
  }

  const customStyle: any = { position: 'relative' }
  customStyle.margin = `${(marginVertical || 0) * 2 + initvalue.marginVertical + 25}mm ${(marginHorizontal || 0) * 2 + initvalue.marginHorizontal}mm  0`
  return <div style={{ overflow: 'hidden', background: getRgb(colors.strong?.backgroundColor), color: getRgb(colors.strong?.textColor) }}>
    <ItemWraper style={{ ...customStyle }}>
      <ResumeHead style={{ left: `-${(marginHorizontal || 0) * 2}mm`, }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div className={'resumeHeadTop'} style={{ color: getRgb(titleBkg) }}>
            <div className={'resumeHeadLeft'}>个人简历</div>
            <div className={'resumeHeadRight'}>
              <div className={'resumeHeadTxt'}>Personal resume</div>
              <div className={'resumeHeadTxt'}>我一直在努力成为更好的自己</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', marginRight: '40px', gap: '15px' }}>
            <div style={{
              borderRadius: '50%',
              background: '#c19f67',
              width: '38px',
              height: '38px',
              color: '#fff',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'

            }}>
              <svg xmlns="http://www.w3.org/2000/svg" style={{ width: '22px', height: '22px' }} viewBox="0 0 640 512"><path fill='currentColor' d="M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z"/></svg>
            </div>
            <div style={{
              borderRadius: '50%',
              background: '#c19f67',
              width: '38px',
              height: '38px',
              color: '#fff',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }}>
              <svg xmlns="http://www.w3.org/2000/svg"style={{ width: '20px', height: '20px' }} viewBox="0 0 512 512"><path fill='currentColor' d="M184 48H328c4.4 0 8 3.6 8 8V96H176V56c0-4.4 3.6-8 8-8zm-56 8V96H64C28.7 96 0 124.7 0 160v96H192 320 512V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9 0-56 25.1-56 56zM512 288H320v32c0 17.7-14.3 32-32 32H224c-17.7 0-32-14.3-32-32V288H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V288z"/></svg>
            </div>
          </div>
        </div>

        <LineBox>
          <div className={'lineL'} style={{ "background": getRgb(titleBkg), '--bkgcolor': getRgb(titleBkg) } as any}>
            <i></i>
          </div>
          <div className={'lineR'}><i></i></div>
        </LineBox>
      </ResumeHead>

      <Title name='basicInfo'></Title>
      <Item initMarginH={initMarginH}>
        <HeaderWrapper style={{ padding: 0, marginBottom: 0 }}>
          <Avator {...personalDetails.photoObj}{...photoObj}></Avator>
          <div style={{ flex: 1 }}>
            <div style={{
              display: 'flex',
              margin: '8px 0',
              gap: 10
            }}>
              <div style={nameStyle} id='name'>
                { getPersonalItem(personalDetails, 'name')}
              </div>
              <div style={jobStyle}>
                {
                  getPersonalLabel(personalDetails, 'expJob')
                }
                { getPersonalItem(personalDetails, 'expJob')}
              </div>
            </div>

            <HeaderDetail>
              {
                detailsOrder.map((item) => {
                  return <HeaderItem name={item} key={item} ></HeaderItem>
                })
              }
            </HeaderDetail>
          </div>
        </HeaderWrapper>
      </Item>

    </ItemWraper>

  </div>
}
export default ResumeHeader
